<template>
  <div>
  <div>
    <div class="modal">
      <div class="modal-bg" @click="EditClose"></div>
      <div class="tour">
        <div class="rele-titles">
         <div>
           <span :class="{current:Entryshow === 1}"@click="changeTitle(1)">客源编辑</span>
           <!--<span :class="{current:Entryshow === 2}"@click="changeTitle(2)">跟进查看</span>-->
           <img @click="EditClose" src="../assets/img/tub.png" alt="">
         </div>
        </div>
        <div v-show="Entryshow === 1">
        <div class="tour-info">
          <!-- 客户资料 -->
          <div class="custo">
            <div class="custo-title">客户资料</div>
            <ul class="custo-list">
              <li>
                <div class="custo-name">姓名</div>
                <div class="custo-input">
                  <input type="" v-model="editData.name" name="" disabled style="border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="custo-name">手机</div>
                <div class="custo-input">
                  <input type="" name="" v-model="editData.phone"
                         onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" style="border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="custo-name">省份</div>
                <div class="custo-input">
                  <input type="text" v-model="editData.areaRegionProvince" disabled style="border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="custo-name">城市</div>
                <div class="custo-input">
                  <input type="text" v-model="editData.areaRegionCity" disabled style="border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="custo-name">邮箱</div>
                <div class="custo-input">
                  <input type="" name="" v-model="editData.email" style="border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="custo-name">微信</div>
                <div class="custo-input">
                  <input type="" name="" v-model="editData.wechat" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" style="border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="custo-name">性别</div>
                <div class="custo-input">
                  <select v-model="editData.sex" placeholder="请选择" style="width:102%;border: 1px solid #a0a0a0;height: 27px;">
                    <option
                      v-for="item in Tourlist.TouristsSex"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">住址</div>
                <div class="custo-input">
                  <input type="" name="" v-model="editData.address" style="border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="custo-name">编客源号</div>
                <div class="custo-input">
                  <input type="text" v-model="editData.id" disabled style="border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="custo-name">职业</div>
                <div class="custo-input">
                  <select v-model="editData.occupation" placeholder="请选择" style="width:102%;border: 1px solid #a0a0a0;height: 27px;">
                    <option
                      v-for="item in Tourlist.TouristsOccupation"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">交易</div>
                <div class="custo-input">
                  <select v-model="editData.transaction" placeholder="请选择" style="width:102%;border: 1px solid #a0a0a0;height: 27px;">
                    <option
                      v-for="item in Tourlist.TouristsTransaction"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">公私客</div>
                <div class="custo-input">
                  <select v-model="editData.publicandprivate" placeholder="请选择" style="width:102%;border: 1px solid #a0a0a0;height: 27px;">
                    <option
                      v-for="item in Tourlist.TouristsPublicandprivate"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">等级</div>
                <div class="custo-input">
                  <select v-model="editData.grade" placeholder="请选择" style="width:102%;border: 1px solid #a0a0a0;height: 27px;">
                    <option
                      v-for="item in Tourlist.TouristsGrade"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">经纪人</div>
                <div class="custo-input">
                  <input type="" v-model="myuserinfo.name" name="" disabled style="border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="custo-name">组别</div>
                <div class="custo-input">
                  <input type="text" v-model="myuserinfo.department_group.title" disabled style="border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="custo-name">门店</div>
                <div class="custo-input">
                  <input type="" v-model="myuserinfo.department_store.title" name="" disabled style="border: 1px solid #a0a0a0;">
                 </div>
              </li>
              <li>
                <div class="custo-name">区域</div>
                <div class="custo-input">
                  <input type="" v-model="myuserinfo.department.title" name="" disabled style="border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="custo-name">委托日期</div>
                <div class="custo-input">
                  <el-date-picker
                    v-model="formData.entrustment_time"
                    type="date"
                    placeholder="选择日期" style="width: 100%; border: 1px solid #a0a0a0;">
                  </el-date-picker>
                </div>
              </li>
            </ul>
          </div>
          <!-- 客户资料 end-->
          <!-- 客户需求 -->
          <div class="demand">
            <div class="custo-title">客户需求</div>
            <ul class="custo-list custo-list1">
              <!-- 价格 -->
              <div class="pub-label">价格</div>
              <li>
                <div class="custo-name">售总价</div>
                <div class="custo-input">
                  <input type="" v-model="editData.totalsales_price" name="" style="width: 70%;border: 1px solid #a0a0a0;"></input> <span>万元</span>
                </div>
              </li>
              <li>
                <div class="custo-name">售单价</div>
                <div class="custo-input">
                  <input type="" v-model="editData.saleunit_price" name="" style="width: 65%;border: 1px solid #a0a0a0;"></input><span>万元/㎡</span>
                </div>
              </li>
              <li>
                <div class="custo-name">租金</div>
                <div class="custo-input">
                  <input type="" name="" v-model="editData.rent_price_month" style="width: 70%;border: 1px solid #a0a0a0;"></input> <span>元/月</span>
                </div>
              </li>
              <li>
                <div class="custo-name">租金</div>
                <div class="custo-input">
                  <input type="" v-model="editData.rent_price_year" name="" style="width: 65%;border: 1px solid #a0a0a0;"></input><span>元/年</span>
                </div>
              </li>
            </ul>
            <!-- 价格 end-->
            <!--房屋  -->
            <div class="Houses">
              <div class="pub-label">房屋</div>
              <ul class="Houses-list">
                <li>
                  <div class="Houses-li">
                    <div class="custo-name">房</div>
                    <div class="custo-input">
                      <select v-model="editData.room" placeholder="请选择" style="width:92%;border: 1px solid #a0a0a0;height: 27px;">
                        <option
                          v-for="item in Tourlist.TouristsrRoom "
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="Houses-li">
                    <div class="custo-name">厅</div>
                    <div class="custo-input">
                      <select v-model="editData.office" placeholder="请选择" style="width:92%;border: 1px solid #a0a0a0;height: 27px;">
                        <option
                          v-for="item in Tourlist.TouristsOffice"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="Houses-li">
                    <div class="custo-name">卫</div>
                    <div class="custo-input">
                      <select v-model="editData.wei" placeholder="请选择" style="width:92%;border: 1px solid #a0a0a0;height: 27px;">
                        <option
                          v-for="item in Tourlist.TouristsWei"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="Houses-li">
                    <div class="custo-name">朝向</div>
                    <div class="custo-input">
                      <select v-model="editData.orientation" placeholder="请选择" style="width:92%;border: 1px solid #a0a0a0;height: 27px;">
                        <option
                          v-for="item in Tourlist.TouristsOrientation"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="Houses-li">
                    <div class="custo-name">用途</div>
                    <div class="custo-input">
                      <select v-model="editData.purpose" placeholder="请选择" style="width:92%;border: 1px solid #a0a0a0;height: 27px;">
                        <option
                          v-for="item in Tourlist.TouristsPurpose"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="Houses-li">
                    <div class="custo-name">装修</div>
                    <div class="custo-input">
                      <select v-model="editData.renovation" placeholder="请选择" style="width:92%;border: 1px solid #a0a0a0;height: 27px;">
                        <option
                          v-for="item in Tourlist.TouristsRenovation"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <!--房屋  end-->
            <!--地段  -->
            <div class="Houses">
              <div class="pub-label">地段</div>
              <ul class="Houses-list">
                <li>
                  <div class="Houses-li">
                    <div class="custo-name">城市</div>
                    <div class="custo-input">
                      <input type="text" v-model="editData.AreaSectionCity" disabled style="border: 1px solid #a0a0a0;">
                    </div>
                  </div>
                  <div class="Houses-li">
                    <div class="custo-name">县/区</div>
                    <div class="custo-input">
                      <input type="text" v-model="editData.AreaSectionXian" disabled style="border: 1px solid #a0a0a0;">
                    </div>
                  </div>
                </li>
                <li>
                  <!--<div class="Houses-li">-->
                    <!--<div class="custo-name">街道</div>-->
                    <!--<div class="custo-input">-->
                      <!--<input type="text" v-model="editData.AreaSectionStreet" disabled style="border: 1px solid #a0a0a0;">-->
                    <!--</div>-->
                  <!--</div>-->
                  <div class="Houses-li">
                    <div class="custo-name">小区</div>
                    <div class="custo-input">
                      <input type="text" v-model="editData.AreaSectionResidential" disabled style="border: 1px solid #a0a0a0;">
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <!--地段  end-->
          </div>
          <!-- 客户需求 end-->
        </div >
        <!-- 备注 -->
        <div class="rema">
          <textarea placeholder="请输入备注..." v-model="editData.desc" style="border: 1px solid #a0a0a0;padding-left: 5px"></textarea>
        </div>
        <!-- 按钮 -->
        <div class="tour-btn" >
          <el-button  type="primary" style="margin-top: 6px;">发短息给他</el-button>
          <el-button @click="editSubmi"  type="primary">提交该客源</el-button>
        </div>
      </div>
    </div>
  </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      SetHourList: {
        type: Function
      },
      LDmodal: {
        type: Function
      },
      EditClose: {
        type: Function
      },
      editData: {
        type: [String, Object]
      }
    },
    data() {
      return {
        myuserinfo: {
          department: '',
          department_store: '',
          department_group: ''
        },//w我的个人信息
        formData:{

        },//要上传的数据
        Tourlist: {},//下拉数据
        prov: [],
        city: [],
        proper: [],
        areas: [],
        Resi: [],
        Entryshow: 1,
        listsss:{},

      }
    },
    methods: {
      // 提交修改
      editSubmi() {
        let that = this;


        that.$http.post('/newapi/Tourists/edit',this.editData)
          .then(res => {
            if (res.data.status === 200) {

              console.log('----------------');

              console.log(that.formData);
              that.SetHourList();
              that.EditClose();
              that.$store.state.messageString = res.data.message;
              that.LDmodal();
            } else {
              that.$store.state.messageString = res.data.message;
              that.LDmodal();
            }

          }).catch(err => {
          console.log(err)
        })
      },

      changeTitle(id) {
        this.Entryshow = id;
      },

      // 获取下拉数据
      getsclect() {
        let that = this;
        that.$http.get('/newapi/Touristslist/index',)
          .then(res => {
            that.Tourlist = res.data.res;

          }).catch(err => {
          console.log(err)
        })
      },
      // 获取城市下拉
      provchange() {
        let that = this;
        that.$http.get('/newapi/Area/getAreaRegion', {
          params: {
            country_code: "CN",
            upper_region: that.formData.province
          }
        })
          .then(function (res) {
            let data = res.data;
            that.city = data.res
          })
          .catch(function (err) {
            console.log(err);
          })
      },
      //获取区县下拉
      citychange() {
        let that = this;
        that.$http.get('/newapi/Area/getAreaRegion', {
          params: {
            country_code: "CN",
            upper_region: that.formData.section_city
          }
        })
          .then(function (res) {
            let data = res.data;
            that.proper = data.res;

          })
          .catch(function (err) {
            console.log(err);
          })
      },
      // 获取街道下拉
      properchange() {
        let that = this;
        that.$http.get('/newapi/Area/getAreaStreetlist', {params: {upper_region: that.formData.section_xian}})
          .then(function (res) {
            let data = res.data;
            that.areas = data.res;
          })
          .catch(function (err) {
            console.log(err);
          })
      },
      //获取小区下拉
      areaschange() {
        let that = this;
        console.log(that.formData.section_street);
        console.log('6666666666666')
        that.$http.get('/newapi/Premises/index', {
          params: {
            street_id: that.formData.section_street
          }
        })
          .then(function (res) {
            console.log(res);
            that.Resi = res.data.res
          })
          .catch(function (err) {
            console.log(err);
          })
      },
      //获取个人信息
      getMyuserinfo() {
        let that = this;
        that.$http.get('/newapi/User/index')
          .then(res => {
            this.myuserinfo = res.data
          }).catch(err => {
          console.log(err)
        });
      },
      // 获取省
      getpro() {
        // 设置省下拉列表
        let that = this;
        that.$http.get('/newapi/Area/getAreaRegion', {params: {country_code: "CN"}})
          .then(function (res) {
            that.prov = res.data.res;
            that.provs = res.data.res;

          })
          .catch(function (err) {
            console.log(err);
          });
      },



    },
    created() {
      this.getpro();
      this.getMyuserinfo();
    },
    mounted() {
      this.getsclect();
    },
  }
</script>
<style scoped>
  .Houses {
    width: 100%;
    float: left;
  }
  .Houses-list {
    width: 94%;
    float: left;
    padding: 0 3%;
  }
  .Houses-li {
    width: 50%;
    float: left;
  }
  .H-p2 {
    width: 50% !important
  }
  .H-p2 input {
    width: 50% !important;
    margin-right: 3px;
  }
  .H-p1 {
    width: 33.333333333%;
    float: left;
  }
  .H-p1 input {
    width: 60%;
    margin-right: 3px;
    padding-left: 2%;
    height: 25px;
    line-height: 25px;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
  }
  .H-p1 span {
    margin-left: 3px;
    display: inline-block;
    text-align: center;
  }
  .Houses-list li {
    width: 50%;
    height: 20px;
    margin-bottom: 10px;
    float: left;
  }
  .tour-btn {
    text-align: center;
  }

  .rema {
    margin-top: 0.5%;
    width: 97.5%;
    padding: 1%;
    float: left;
    border: 1px solid #d3d3d3;
    background: #ffffff;
    box-shadow: #e8e7e7 0px 0px 10px;
  }
  .rema textarea {
    width: 100%;
    font-size: .9em;
    height: 60px;
    background: none;
    border: none;
  }

  .custo-list1 li input {
    width: 60%;
  }
  .pub-label {
    font-weight: bold;
    margin-left: 3%;
    margin-bottom: 8px;
  }
  .custo-list1 li span {
    margin-left: 2px;
    display: inline-block;
  }
  .demand {
    width: 56.5%;
    height: 320px;
    overflow: hidden;
    margin-top: 47px;
    float: right;
    background: #ffffff;
    box-shadow: #e8e7e7 0px 0px 10px;
  }
  .custo-name {
    width: 30%;
    float: left;
    line-height: 30px;
    text-align: center;
    font-weight:bold;
  }
  .custo-input {
    width: 70%;
    float: left;
  }
  .custo-input input {
    width: 98%;
    padding-left: 2%;
    height: 25px;
    line-height: 15px;
    font-size: .9em;
    border: 1px solid #d3d3d3;
    cursor: pointer;
  }
  .custo-list {
    width: 94%;
    padding: 0 3%;
    float: left;
  }
  #custo-input input {
    height: 0 !important;
  }
  .custo-list li {
    width: 50%;
    height: 20px;
    float: left;
    margin-bottom: 10px;
  }
  .tour {
    width: 58%;
    background: #f9f9f9;
    padding-bottom: 4px;
    position: absolute;
    z-index: 10;
    left: 20%;
    height: 498px;
    /*overflow-y: auto;*/
    overflow: hidden;
    overflow-y: scroll;
    top: 13%;
    border-radius: 5px;
    box-shadow: #e8e7e7 0px 0px 10px;
  }
  .custo-title {
    width: 100%;
    float: left;
    text-align: center;
    font-weight: bold;
    line-height: 45px;
  }
  .custo {
    width: 43%;
    float: left;
    margin-top: 47px;
    height: 320px;
    overflow: hidden;
    box-shadow: #e8e7e7 0px 0px 10px;
    background: #ffffff;
  }
  .tour-info {
    width: 100%;
    float: left;
  }
  img:hover {
    background: #bd2c00 !important;
    color: #ffffff;
  }
  img{
    /*position: fixed;*/
    flex-star:40px;
    /*margin-left: 44%;*/
    position: relative;
    border-radius: 10px;

  }
  .rele-titles {
    width: 48%;
    padding: 0 0.5%;
    line-height: 50px;
    font-size: 2em;
    color: #000;
    background: #f5f5f7;
    position: fixed;
    z-index: 9;
    border-bottom: 1px solid #d3d3d3;
    padding-right: 200px;
  }
  .rele-titles img{
    left: 91%;
    cursor: pointer;
  }
  .rele-titles span{
    cursor: pointer;
  }
  .current {
    color: #ed7d31;
    background: #fff;
  }

</style>
